<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="head" shadow="never">
        <!-- 头部的东西 -->
        <template :model="formInline">
          <el-form
            :inline="true"
            :model="formInline"
            class="demo-form-inline"
            ref="Forms"
          >
            <el-form-item label="关键字">
              <el-input
                v-model="formInline.keyword"
                placeholder="根据文章标题搜索"
              ></el-input>
            </el-form-item>
            <el-form-item label="文章分类">
              <el-select
                v-model="formInline.state"
                placeholder="请选择分类"
                size="small"
              >
                <!-- 循环渲染可选项 -->
                <el-option
                  v-for="item in status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="eliminate">清除</el-button>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
            <!-- 右侧的 -->
            <el-form-item class="offside">
              <el-button type="success" @click="Added"
                ><i class="el-icon-edit"></i>新增技巧</el-button
              >
            </el-form-item>
          </el-form>
        </template>
        <!-- 消息提示 -->
        <template>
          <el-alert
            class="hint"
            :title="`数据一共有${formData.counts}条`"
            type="info"
            show-icon
          >
          </el-alert>
        </template>
        <!-- 表格 -->
        <template>
          <el-table style="width: 100%" :data="list">
            <el-table-column prop="id" label="序号" width="180" type="index">
            </el-table-column>
            <el-table-column prop="title" label="文章标题" width="180">
              <template #default="{ row }">
                {{ row.title }}
                <span
                  v-show="row.videoURL !== null && row.videoURL !== ''"
                  @click="transmit(row.videoURL)"
                >
                  <svg-icon icon-class="VIDEO"></svg-icon
                ></span>
              </template>
            </el-table-column>
            <el-table-column prop="visits" label="阅读数"></el-table-column>
            <el-table-column prop="username" label="录入人"></el-table-column>
            <el-table-column
              prop="createTime"
              label="录入时间"
            ></el-table-column>
            <el-table-column prop="state" label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.state == 1">已启用</span>
                <span v-else>已禁用</span>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" width="180">
              <template #default="{ row }">
                <el-button type="text" size="small" @click="examine(row)"
                  >预览</el-button
                >
                <el-button type="text" size="small" @click="updatestart(row)">{{
                  judge(row.state)
                }}</el-button>
                <el-button
                  type="text"
                  size="small"
                  :disabled="row.state === 1 ? true : false"
                  @click="amend(row)"
                  >修改</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  :disabled="row.state === 1 ? true : false"
                  @click="del(row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="Number(formData.page)"
            :page-sizes="[2, 5, 10, 20]"
            :page-size="Number(formData.pagesize)"
            layout="prev,pager,next, sizes,jumper"
            :total="formData.counts"
          >
          </el-pagination>
        </div>
      </el-card>
      <!-- 预览弹窗 -->
      <el-dialog title="预览文章" :visible.sync="showDialog" width="50%">
        <preview :details="details" />
      </el-dialog>
      <!-- 添加或者编辑弹窗 -->
      <el-dialog
        :title="isedit ? '编辑' : '新增文章'"
        :visible.sync="appendDialog"
        v-if="appendDialog"
        width="50%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <!-- 对话框内容 -->
        <el-form
          label-width="100px"
          ref="formDate"
          :model="pubForm"
          :rules="rules"
        >
          <!-- 1.文章标题 -->
          <el-form-item label="文章标题" prop="title">
            <el-input
              placeholder="请输入标题"
              v-model="pubForm.title"
            ></el-input>
          </el-form-item>
          <!-- 3.文章内容 -->
          <el-form-item label="文章内容" prop="articleBody">
            <quill-editor
              v-model="pubForm.articleBody"
              @blur="question"
            ></quill-editor>
          </el-form-item>
          <!-- 4.视频地址 -->
          <el-form-item label="视频地址">
            <el-input
              placeholder="请输入视频地址"
              v-model="pubForm.videoURL"
            ></el-input>
          </el-form-item>
          <!-- 5.底部按钮 -->
          <el-form-item>
            <el-button type="primary" @click="issue">发布</el-button>
            <el-button type="info" @click="resetForm">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <!-- 视频弹窗  -->
    <div class="popContainer" v-if="dialogVisible">
      <template>
        <el-button
          type="info"
          icon="el-icon-close"
          circle
          class="mas"
          @click="dialogVisible = false"
        ></el-button>
        <!-- <meta name="referrer" content="no-referrer" /> -->
        <video id="myVideo" class="video-js" Autoplay controls preload="auto">
          <source :src="videoURL" type="video/mp4" />
        </video>
      </template>
    </div>
  </div>
</template>

<script>
import { status } from '@/api/hmmm/constants.js'
import { list, changeState, remove, add, update } from '@/api/hmmm/articles'
import preview from './preview.vue'

console.log(status)
export default {
  components: {
    preview
  },
  data () {
    return {
      videoURL: '',
      dialogVisible: false, // 视频弹窗
      isedit: false, // 看看是否是修改
      appendDialog: false, // 新增弹窗
      status,
      details: 0, // 预览内容
      showDialog: false, // 预览弹窗
      // 搜索框
      formInline: {
        keyword: '',
        state: ''
      },
      // 发布文章数据    // 编辑
      pubForm: {
        // 文章的标题
        title: '',
        // 文章的内容
        articleBody: '',
        // 视频地址
        videoURL: null
      },
      rules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ]
      },
      // 表格列表详细
      list: [], // 表格内容
      // 分页的内容
      formData: {
        page: 1, // 当前页数
        pagesize: 10, // 每页多少个
        counts: 0 // 总共数据条数
      }
    }
  },
  created () {
    this.tbody()
  },
  methods: {
    // 题干富文本事件函数启动校验
    question () {
      // validateField表单的字段验证的方法
      this.$refs.formDate.validateField('articleBody')
    },
    // 调用搜索
    search () {
      this.bolting(this.formInline)
      console.log(this.formInline)
    },
    // 筛选请求
    async bolting (data) {
      try {
        const res = await list(data)
        console.log('list', res)
        res.data.items.forEach(item => {
          item.createTime = this.$dayjs(item.createTime).format(
            'YYYY-MM-DD hh:mm:ss'
          )
        })
        // 遍历数组，然后格式化时间
        this.list = res.data.items
        // 保存数据
      } catch (err) {
        console.log('list', err)
      }
    },

    transmit (data) {
      console.log(data)
      this.videoURL = data
      this.dialogVisible = true
    },
    // 发布
    issue () {
      this.$refs.formDate.validate(valid => {
        if (!valid) return
        this.isedit ? this.up() : this.Add()
      })
      // this.$refs.formDate.resetFields()   //删除这个
    },
    // 取消
    resetForm () {
      this.pubForm = {
        // 文章的标题
        title: '',
        // 文章的内容
        articleBody: '',
        // 视频地址
        videoURL: null
      }
      this.$refs.formDate.resetFields()
      this.appendDialog = false
    },

    // 编辑
    async up () {
      try {
        const res = await update(this.pubForm)
        console.log('update', res)
        this.appendDialog = false
        this.tbody()
        // 保存数据
      } catch (err) {
        console.log('update', err)
      }
    },
    // 添加
    async Add () {
      try {
        const res = await add(this.pubForm)
        console.log('add', res)
        this.appendDialog = false
        this.tbody()
        // 保存数据
      } catch (err) {
        console.log('add', err)
      }
    },

    // 新增
    Added () {
      this.isedit = false
      this.appendDialog = true
      this.pubForm = {}
    },
    // 修改
    amend (data) {
      this.pubForm = { ...data }
      this.appendDialog = true
      this.isedit = true
      console.log(this.isedit)
    },

    // 枚举
    judge (val) {
      if (val === 1) {
        return '启用'
      } else if (val === 0) {
        return '禁用'
      }
    },

    // 启用禁用
    updatestart (data) {
      this.$confirm('此操作将切换文件状态, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          if (data.state === 1) {
            data.state = 0
          } else {
            data.state = 1
          }
          const res = await changeState(data)
          console.log(res, 'changeStatechangeState')
          console.log(data)
          this.tbody()
          this.$message({
            type: 'success',
            message: '切换状态成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 删除
    del (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await remove(id)
          console.log(res)
          if (this.formData.page > 1 && this.list.length === 1) {
            this.formData.page--
          }
          this.tbody()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    // 预览
    examine (details) {
      this.isedit = false
      this.showDialog = true
      this.details = details
    },
    // 清除
    eliminate () {
      this.formInline = {
        user: '',
        region: ''
      }
      this.tbody()
    },
    // 获取表单内容
    async tbody () {
      try {
        const res = await list(this.formData)
        console.log('list', res)
        res.data.items.forEach(item => {
          item.createTime = this.$dayjs(item.createTime).format(
            'YYYY-MM-DD hh:mm:ss'
          )
        })

        // 遍历数组，然后格式化时间
        this.list = res.data.items
        this.formData.counts = res.data.counts
        // 保存数据
      } catch (err) {
        console.log('list', err)
      }
    },

    handleSizeChange (val) {
      this.formData.pagesize = val
      this.formData.page = 1
      this.tbody()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      this.formData.page = val
      this.tbody()
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style>
.ql-editor {
  height: 330px !important;
}
.block {
  margin-top: 20px;
  float: right;
}
.hint {
  margin-bottom: 20px;
}
.head {
  flex: inherit;
}
.offside {
  float: right;
}
.popContainer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9999;
}
.video-js {
  position: fixed;
  top: 150px;
  left: 200px;
  right: 0;
  bottom: 0;
  text-align: center;
  width: 80% !important;
  height: 80% !important;
}
.shut {
  position: fixed;
  top: 50px;
  left: 900px;
  right: 0;
  bottom: 0;
  text-align: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
}
.mas {
  margin: 10px 50%;
  position: absolute;
  top: 20px;
}
</style>
